<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>画园园</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="css/colpick.css" type="text/css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#textarea {
				border: none;
				width: 100%;
				padding: 10px;
				color: #666;
				font-size: 18px;
			}

			canvas {
				border: none;
			}
			.el-menu{
				position: fixed;
				z-index: 9;
				top: 0;
				width: 100%;
			}
			.main{
				padding-top: 61px;
				position:fixed;
			}
			#content{
				display: flex;
				border: 1px solid #ccc;
			}
			.btn_group{
				padding: 10px;
				justify-content: space-evenly;
			}
		</style>
	</head>
	<body>
		<div class="main" id="vue">
			<el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#00aaff">
				<el-menu-item index="1" @click="clear_result">清空</el-menu-item>
				<el-menu-item index="2" @click="direction_change">{{direction=='h'?'横着':'竖着'}}</el-menu-item>
				<el-menu-item index="3" @click="clearCanvas">清除画布</el-menu-item>
				<el-menu-item index="4" id="picker">颜色</el-menu-item>
				<el-menu-item index="4" @click="back">></el-menu-item>
			</el-menu>
			<textarea id="textarea" rows="7" cols="50" value=""></textarea>
			<el-input v-model="message" id="message" placeholder="请输入内容"></el-input>
			<div class="btn_group flex flex-row">
				<el-button type="primary" onclick="publishMessage()">发送消息</el-button>
				<el-button type="success" onclick="publishDraw()">我画好啦</el-button>
			</div>
			<div id="content" :style="{'flex-direction':direction=='h'?'row':'column'}"></div>
			<canvas id="xu" width="370" height="400"></canvas>
		</div>
		<!-- import Vue before Element -->
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<!-- import JavaScript -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/colpick.js" type="text/javascript"></script>
		<script type="text/javascript" src="https://cdn-hangzhou.goeasy.io/goeasy.js"></script>
		<script type="text/javascript">
			new Vue({
				el: "#vue",
				data: {
					direction:'s',//画图方向 h横着 s竖着
					message:'',//消息
				},
				mounted() {
					let colpick=$('#picker').colpick();
					$(".colpick_submit").click(function(){
						let rgb=$(".colpick_current_color").attr("style");
						rgb=rgb.substring(rgb.indexOf(":")+1,rgb.length-1).trim();
						var canvas = document.getElementById("xu");
						var changeColor = canvas.getContext("2d");
						changeColor.lineWidth = 3;
						changeColor.strokeStyle = rgb;
						changeColor.closePath();
						console.log(rgb);
						$(".colpick").css("display","none")
					})
				},
				methods: {
					back(){
						location="menu.html"
					},
					clear_result(){
						document.getElementById("content").innerHTML="";
					},
					direction_change(){
						if(this.direction=='s'){
							this.direction='h';
						}else{
							this.direction='s';
						}
					},
					clearCanvas() {
						canvas.height = canvas.height;
						xx.lineWidth = 3;
					}
				}
			})
		</script>
		<script type="text/javascript">
			document.getElementById("textarea").value="聊天内容:\n"
			var textarea_value = document.getElementById("textarea").value;
			if (typeof GoEasy !== 'undefined') {
				var goEasy = new GoEasy({
					appkey: 'BC-2c64b569166543aaba2ce6566a3aec89'
				});
				var draw_goEasy = new GoEasy({
					appkey: 'BC-6227a58663e345188ed60d8c618207df'
				});
			}

			//页面一加载就订阅
			goEasy.subscribe({
				channel: 'chat_channel',
				onMessage: function(message) {
					if (!textarea_value) {
						textarea_value = "";
					}
					textarea_value = textarea_value + message.content + "\n";
					console.log('Meessage received:' + message.content);
					console.log(textarea_value);
					document.getElementById("textarea").value = textarea_value;
					console.log(message.content);

				}
			});
			draw_goEasy.subscribe({
				channel: 'draw_channel',
				onMessage: function(message) {
					console.log(message.content);
					document.getElementById("content").innerHTML += "<img width='185' height='200' src=" + message.content + " />";
				}
			});

			//推送消息
			function publishMessage() {
				console.log(document.getElementById("message").value);
				goEasy.publish({
					channel: 'chat_channel',
					message: document.getElementById("message").value
				});
				let text = document.getElementById("textarea");
				text.scrollTop = text.scrollHeight;
				document.getElementById("message").value=""
			}

			function publishDraw() {
				var imageData = canvas.toDataURL('image/png');
				canvas.height = canvas.height;
				drawFlag=true;
				draw_goEasy.publish({
					channel: 'draw_channel',
					message: imageData
				});
			}

			//取消订阅的页面不会再收到信息
			function unsubscribe() {
				goEasy.unsubscribe({
					channel: "chat_channel"
				});
			}
		</script>
		<script type="text/javascript">
			console.log(document.body.clientWidth);
			var canvas = document.getElementById("xu");
			var xx = canvas.getContext("2d");
			xx.lineWidth = 3;
			// xx.strokeStyle = "blue";
			var flag = false;//画笔状态
			var drawFlag=false;
			let locationY=320;
			$('#xu').on('touchstart', function(e) {
				if(drawFlag){
					document.getElementById("content").innerHTML="";
					drawFlag=false;
				}
				let evt = window.event || e;
				var touch = evt.touches[0]; //获取第一个触点
				var x = Number(touch.pageX); //页面触点X坐标
				var y = Number(touch.pageY); //页面触点Y坐标
				// console.log(x);
				var mouseX = x - this.offsetLeft; //获得当前页面的x坐标
				var mouseY = y - this.offsetTop; //y
				flag = true;
				console.log(mouseX);
				console.log(this.offsetLeft);
				xx.moveTo(x, y-locationY); //起始位置
			});
			//当鼠标抬起时
			$("#xu").on('touchend', function(e) {
				flag = false;
			});
			$("#xu").on('touchmove', function(e) {
				let evt = window.event || e;
				var touch = evt.touches[0]; //获取第一个触点
				var x = Number(touch.pageX); //页面触点X坐标
				var y = Number(touch.pageY); //页面触点Y坐标
				var mouseX = e.pageX - this.offsetLeft; //获得当前页面的x坐标
				var mouseY = e.pageY - this.offsetTop; //y
				if (flag) {
					xx.lineTo(x, y-locationY); //终止位置
					xx.stroke(); //结束图形
				}
			});
			
			//当鼠标按下时
			$("#xu").mousedown(function(e) {
				var mouseX = e.pageX - this.offsetLeft; //获得当前页面的x坐标
				var mouseY = e.pageY - this.offsetTop; //y
				flag = true;
				console.log(mouseX);
				console.log(mouseY);
				xx.moveTo(mouseX, mouseY); //起始位置
			});
			//当鼠标抬起时
			$("#xu").mouseup(function(e) {
				flag = false;
				xx.beginPath();
				xx.closePath();
			});
			//当鼠标移动时
			$("#xu").mousemove(function(e) {
				var mouseX = e.pageX - this.offsetLeft; //获得当前页面的x坐标
				var mouseY = e.pageY - this.offsetTop; //y
				if (flag) {
					xx.lineTo(mouseX, mouseY); //终止位置
					xx.stroke(); //结束图形
				}
			});
		</script>
	</body>
</html>
